<template>
    <div class="performance-bonus-form">
        <div class="header-actions">
            <router-link to="/main/renshi/jixiao">返回绩效</router-link>
            <span>
                <router-link style="text-decoration: none"
                    to="/main/renshi/jixiao/jxjjshenqinList">列表</router-link>&emsp;
                <span style="cursor: pointer;" @click="printForm">打印</span>
            </span>
        </div>
        <h2 class="form-title">绩效奖金申请单</h2>
        <p class="form-field">
            申请日期：
            <input style="width: 10%;" v-model="formData.applyDate" type="date" :disabled="isView" />
        </p>
        <table class="form-table" border="1">
            <tr>
                <td style="width: 80px;">申请人：</td>
                <td><input v-model="formData.applicant" :disabled="isView" /></td>
                <td>部门：</td>
                <td><input v-model="formData.department" :disabled="isView" /></td>
                <td>职位：</td>
                <td><input v-model="formData.position" :disabled="isView" /></td>
            </tr>
            <th colspan="6">一、工作业绩概述</th>
            <tr>
                <td colspan="6">
                    <textarea class="textkuang" v-model="formData.workPerformanceOverview" style="height: 150px;"
                        :disabled="isView"></textarea>
                </td>
            </tr>
            <th colspan="6">二、自我评估</th>
            <tr>
                <td colspan="6">
                    <textarea class="textkuang" v-model="formData.selfAssessment" style=" height: 150px;"
                        :disabled="isView"></textarea>
                </td>
            </tr>
            <th colspan="6">三、部门经理评价</th>
            <tr>
                <td colspan="6">
                    <textarea class="textkuang" v-model="formData.managerEvaluation" style=" height: 80px;"
                        :disabled="isView"></textarea>
                </td>
            </tr>
            <tr>
                <td>推荐绩效奖金额/比例：</td>
                <td colspan="5"><input v-model="formData.recommendedBonus" :disabled="isView" /></td>
            </tr>
            <tr>
                <td>其他评价或建议：</td>
                <td colspan="5">
                    <textarea class="textkuang" v-model="formData.otherComments" style=" height: 80px;"
                        :disabled="isView"></textarea>
                </td>
            </tr>
            <tr>
                <td>签名：</td>
                <td colspan="5"><input v-model="formData.managerSignature" :disabled="isView" /></td>
            </tr>
            <th colspan="13">四、审批意见</th>
            <tr>
                <td>人力资源部意见</td>
                <td colspan="3">
                    <textarea class="textkuang" v-model="formData.hrComment" style=" height: 80px;"
                        :disabled="isView"></textarea>
                </td>
                <td colspan="2">
                    <input v-model="formData.hrSignatureDate" type="date" :disabled="isView" />
                </td>
            </tr>
            <tr>
                <td>高层管理人员审批</td>
                <td colspan="3">
                    <textarea class="textkuang" v-model="formData.executiveApproval" style=" height: 80px;"
                        :disabled="isView"></textarea>
                </td>
                <td colspan="2">
                    <input v-model="formData.executiveSignatureDate" type="date" :disabled="isView" />
                </td>
            </tr>
            <tr>
                <td>五、备注</td>
                <td colspan="12">
                    <textarea class="textkuang" v-model="formData.remarks" style=" height: 100px;"
                        :disabled="isView"></textarea>
                </td>
            </tr>
        </table>
        <p class="form-info"><span>表单编号及版本：AM-JY-226 A/3 </span><span>保存期限：长期</span></p>
        <el-button v-if="!isView" type="primary" @click="saveData" class="save-button">保存</el-button>
    </div>
</template>

<script>
import { savePerformanceBonus, getPerformanceBonusDetail } from '@/api/performanceBonus'

export default {
    data() {
        return {
            isView: false,
            formData: {
                id: null,
                applyDate: '',
                applicant: '',
                department: '',
                position: '',
                workPerformanceOverview: '',
                selfAssessment: '',
                managerEvaluation: '',
                recommendedBonus: '',
                otherComments: '',
                managerSignature: '',
                hrComment: '',
                hrSignatureDate: '',
                executiveApproval: '',
                executiveSignatureDate: '',
                remarks: ''
            }
        };
    },
    async created() {
        const { id, mode } = this.$route.query
        this.isView = mode === 'view'

        if (id) {
            await this.fetchDetail(id)
        }
    },
    methods: {
        async fetchDetail(id) {
            try {
                const response = await getPerformanceBonusDetail(id)
                this.formData = response.data
            } catch (error) {
                this.$message.error('获取详情失败：' + error.message)
            }
        },
        async saveData() {
            try {
                if (!this.formData.applicant) throw new Error('请填写申请人')
                if (!this.formData.applyDate) throw new Error('请选择申请日期')
                if (!this.formData.department) throw new Error('请填写部门')

                await savePerformanceBonus(this.formData)
                this.$message.success('保存成功')
                this.$router.push('/main/renshi/jixiao/jxjjshenqinList')
            } catch (error) {
                this.$message.error('保存失败：' + error.message)
            }
        },
        printForm() {
            window.print()
        }
    }
};
</script>

<style scoped lang="scss">
.performance-bonus-form {
    font-family: '宋体', sans-serif;
    padding: 20px;
     background-color: #f9f9f9; 
    border-radius: 8px;
    //  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
    width: 1200px;
    margin: 0 auto;
}

.header-actions {
    display: flex;
    padding: 0px 10px;
    gap: 20px;
    justify-content: space-between;
}

.form-title {
    text-align: center;
    color: #333;
}

.form-field {
    margin-bottom: 10px;
}

.form-table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

th,
td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: center;
}

th {
    background-color: #f2f2f2;
    text-align: left;
}

.textkuang {
    width: 98%;
    background-color: #f9f9f9;
    outline: none;
    font-family: '宋体';
    border: 1px solid #ddd;
    resize: vertical;
    border-radius: 4px;
    padding: 8px;
}

input {
    width: 96%;
    outline: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px;
    font-family: '宋体';
}

input[type="date"] {
    width: 50%;
    font-family: '宋体';
}

input[disabled],
textarea[disabled] {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    color: #606266;
    cursor: not-allowed;
    font-family: '宋体';
}

.form-info {
    color: #666;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
}

.save-button {
    display: block;
    width: 100%;
    padding: 10px;
    border-radius: 4px;
}

@media print {

    /*@page规则被用来设置打印页面的方向为横向*/
    // @page {
    //   size: landscape;
    // }

    .performance-bonus-form {
        width: 210mm;
    }

    .header-actions {
        display: none;
    }


    .save-button {
        display: none;

    }

    .main-form {
        box-shadow: none;
        padding: 10px;
    }

    table {
        margin: 10px 0px;
    }

    .info-table,
    .content-table,
    .approval-table {
        border: 1px solid #000;

        td,
        th {
            border: 1px solid #000;
        }
    }

    td,
    th {
        padding: 8px !important;
        border: 1px solid #000;
        white-space: nowrap;
    }

    input {
        border: none !important;
        background-color: transparent !important;
        text-align: center;
    }

    textarea {
        border: 0px !important;
        resize: none !important;
    }
}
</style>